<template>
  <div class="agreement-edit">
     <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="协议名称" prop="protocolName">
              <el-input v-model.trim="ruleForm.protocolName" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="状态" prop="protocolStatus">
              <el-radio-group v-model="ruleForm.protocolStatus" :disabled="disabled">
                <el-radio :label="item.dicCode" v-for="(item, index) in enabledArr" :key="index">{{ item.dicName }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="内容" prop="protocolContent">
              <div class="edit-wrap">
                <quill-editor
                  ref="myQuillEditor"
                  v-model="ruleForm.protocolContent"
                  class="quill-editor"
                  :disabled="disabled"
                  :options="editorOption"
                  @change="onEditorChange($event)"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <div class="edit-footer">
      <el-button @click="confirmDialog" type="primary" :disabled="disabled">保存</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'agreement-edit',
  components: {
    quillEditor
  },
  data () {
    return {
      ruleForm: {
        protocolName: '',
        protocolStatus: 1,
        protocolContent: ''
      },
      rules: {
        protocolName: [
          { required: true, message: '请输入协议名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      },
      disabled: false,
      protocolId: false,
      enabledArr: [],
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'color': [] }],
            [{ 'align': [] }],
            ['image']
          ]
        },
        placeholder: '请输入'
      }
    }
  },
  created () {
    this.getDic().then(res => {
      // console.log(res)
      this.dict = res.data
      this.dict.forEach((item, index) => {
        if (item.dicName == 'Enabled') {
          this.enabledArr = item.dicValueList
        }
      })
    })
    if (this.$route.query.action == 'view') {
      this.disabled = true
      this.getProtocolDetail()
    }
    if (this.$route.query.action == 'edit') {
      this.getProtocolDetail()
    }
  },
  methods: {
    onEditorBlur (quill) {
      // console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      // console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      // console.log('editor ready!', quill)
    },
    onEditorChange ({ quill, html, text }) {
      // console.log('editor change!', quill, html, text)
      // this.ruleForm.TipContent = html
    },
    getProtocolDetail () {
      var params = {
        id: this.$route.query.id
      }
      this.$store.dispatch('manage/ProtocolGetById', params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          var data = res.data
          this.$set(this.ruleForm, 'protocolName', data.protocolName)
          this.$set(this.ruleForm, 'protocolStatus', data.protocolStatus)
          this.$set(this.ruleForm, 'protocolContent', data.protocolContent)
          this.protocolId = data.id
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.closeTagTo('/home/agreement')
    },
    // 确认
    confirmDialog () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var params = {
            'id': this.$route.query.action == 'add' ? '' : this.protocolId,
            'protocolContent': this.ruleForm.protocolContent,
            'protocolName': this.ruleForm.protocolName,
            'protocolStatus': this.ruleForm.protocolStatus
          }
          this.dialogLoading = true
          var url = this.$route.query.action == 'add' ? 'manage/ProtocolAdd' : 'manage/ProtocolEdit'
          this.$store.dispatch(url, params).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              this.closeTagTo('/home/agreement')
            } else {
              this.$message({ message: res.msg, duration: 2000, type: 'error' })
            }
            this.dialogLoading = false
          }).catch(err => {
            this.$message({ message: err.msg, duration: 2000, type: 'error' })
            this.dialogLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.agreement-edit {
  padding: 15px !important;
  position: relative;
  background: #fff;
  .btn-list {
    float: right;
    margin-right: 10px;
    font-size: 12px;
    color: #409EFF;
    cursor: pointer;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .fix-lh {
    line-height: 32px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  .left{
    min-height:500px;
    background:#fff;
  }
  .left-tree{
    width: 100%;
    min-height:600px;
    overflow: auto;
  }
  .left-top{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    background: #e2e2e2;
    font-size: 15px;
  }
  .box-card{
    margin-bottom: 10px;
  }
  .avtar-wrap{
    padding: 10px 30px 30px;
    .avtar-item{
      width: 200px;
      margin: 0 auto 50px;
      p{
        line-height: 26px;
        color: #bbb;
      }
      .avtar-img{
        width: 200px;
        height: 200px;
      }
      .avtar-tip{
        color: #555;
      }
    }
  }
  .edit-footer{
    width: calc(100% - 240px);
    height: 60px;
    line-height: 60px;
    position: fixed;
    background: #fff;
    left: 230px;
    bottom: 0;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .edit-wrap{
    height: 410px;
    .ql-snow .ql-picker{
      line-height: 24px;
    }
    .ql-container{
      white-space:pre-wrap;
    }
  }
  .quill-editor{
    width: 100%;
    height: 360px;
  }
}
</style>
